<template>
  <div class="content">
    <div v-for="(item, index) in List" :key="index" class="bg">
      <div class="img"><img :src="item.img" alt="" height="75%" /></div>
      <div class="words">
        <p>{{ item.title }}</p>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [
        {
          img: require("/static/images/1-removebg-preview.png"),
          title: "85+",
          content: "Award",
        },
        {
          img: require("/static/images/2-removebg-preview.png"),
          title: "96k",
          content: "Clients",
        },
        {
          img: require("/static/images/3-removebg-preview.png"),
          title: "60+",
          content: "Employee",
        },
        {
          img: require("/static/images/4-removebg-preview.png"),
          title: "99%",
          content: "Protection",
        },
      ],
    };
  },
};
</script>

<style  scoped>
.content {
  margin: 200px auto;
  width: 80%;
  padding: 80px;
  display: flex;
  justify-content: space-evenly;
  background-color: #fff6ee;
  border-radius: 100px;
  overflow: hidden;
  text-align: center;
  flex-wrap: wrap;
}
.bg {
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  width: 200px;
  height: 300px;
  margin: auto;
  justify-content: center;
  flex-direction: column;
  border-radius: 100px;
  overflow: hidden;
}
.img {
  margin: 0;
  text-align: center;
}
.words p {
  margin: 0;
  padding: 0;
  display: block;
}
.words :nth-child(1) {
  color: #000857;
  font-size: 47px;
  font-weight: bolder;
}
.words :nth-child(2) {
  color: #525475;
  font-size: 21px;
}
</style>